import React, { Component } from "react";
import {
  SpreadSheets,
  Worksheet,
  Column,
} from "@grapecity/spread-sheets-react";
import GC from "@grapecity/spread-sheets";
var SpreadJSKey = "xxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
const SpreExam = () => {
  const spreadBackColor = "aliceblue";
  const sheetName = "Goods List";
  const hostStyle = {
    width: "800px",
    height: "600px",
  };
  const data = [
    {
      Name: "Apple",
      Category: "Fruit",
      Price: 1,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Potato",
      Category: "Fruit",
      Price: 2.01,
      "Shopping Place": "Other",
    },
    {
      Name: "Tomato",
      Category: "Vegetable",
      Price: 3.21,
      "Shopping Place": "Other",
    },
    {
      Name: "Sandwich",
      Category: "Food",
      Price: 2,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Hamburger",
      Category: "Food",
      Price: 2,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Grape",
      Category: "Fruit",
      Price: 4,
      "Shopping Place": "Sun Store",
    },
  ];
  const columnWidth = 100;
  return (
    <div>
      <SpreadSheets
      //   backColor={spreadBackColor}
      //   hostStyle={hostStyle}
      >
        <Worksheet name={sheetName} dataSource={data}>
          <Column dataField="Name" width={300}></Column>
          <Column dataField="Category" width={columnWidth}></Column>
          <Column
            dataField="Price"
            width={columnWidth}
            formatter="$#.00"
          ></Column>
          <Column dataField="Shopping Place" width={columnWidth}></Column>
        </Worksheet>
      </SpreadSheets>
    </div>
  );
};
export default SpreExam;
